<template>
    <div :class="{'outBox':true,'align-left':!myself,'align-right':myself}">
        <div :class="{'speaker':!myself,'myself':myself}">{{ this.speaker }}</div>
        <div class="msgBox">{{ this.msg }}{{ this.filename }}<span v-if="this.type=='file' &&this.myself ==false" style="color:green;cursor: pointer;" @click="download"> {{ this.downloading?"停止":"下载"}}</span></div>
        
        <ProgressBar v-if="this.type=='file' &&this.myself ==false" :progress="progress"></ProgressBar>
    </div>
</template>
<script>


import ProgressBar from './progressBar.vue';
export default {
    props: {
    type: { type:String},
    speaker: { type: String },
    myself: { Type: Boolean },
    msg: { type: String },
    progress:{type:Number},
    filename:{type:String},
    },
    data(){
        return{
            downloading:false
        }
    },
    methods:{
        download(){
            this.downloading = !this.downloading
            this.$emit("downloadHandler",this.filename)
        }
    },
    components: { ProgressBar }

}
</script>
<style scoped>
    .outBox{
        padding:2px 20px;
        text-align: center;
        font-size: medium;
        font-weight: bold;
        letter-spacing:2px;
        line-height:40px;
        display: flex;
        flex-direction: column;
    }
    .align-left{
        align-items: start;
    }
    .align-right{
        align-items:end;
    }
    .speaker{
        width:20%;
        color:black;
        background-color:white;
        border:10px solid black;
        transform:skew(4deg,-5deg) translateY(15px) 
    }
    .myself{
        width:20%;
        color:black;
        background-color:white;
        border:10px solid black;
        transform:skew(-4deg,5deg) translateY(15px) 
    }
    .msgBox{
        color:white;
        background-color: black;
        border-color: white;
        border-width: 10px 12px 14px 12px;
        padding:5px;
        white-space:pre-line;
 }
</style>